﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, jQuery TreeGrid, TreeGrid, TreeGrids, JavaScript TreeGrid, HTML TreeGrid, jQuery mobile treegrid, treelist widget, treelist control, javascript mobile treelist, javascript mobile treegrid" />
    <meta name="description" content="This page represents the help documentation of the jqxTreeGrid widget." />
    <title>jqxTreeGrid API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
     <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>altRows</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the jqxTreeGrid automatically alternates row colors.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>altRows</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({altRows: true}); </code></pre>
                        <p>
                            Get the <code>altRows</code> property.
                        </p>
                        <pre><code>var altRows = $('#treeGrid').jqxTreeGrid('altRows'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sznLP/">altRows is set to true</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>autoRowHeight</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the jqxTreeGrid automatically calculates the rows height and wraps the cell text.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>autoRowHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({autoRowHeight: true}); </code></pre>
                        <p>
                            Get the <code>autoRowHeight</code> property.
                        </p>
                        <pre><code>var autoRowHeight = $('#treeGrid').jqxTreeGrid('autoRowHeight'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tQWJM/">autoRowHeight is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span39'>aggregatesHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   34
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting <code>showAggregates</code> to true.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>aggregatesHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({aggregatesHeight: 50}); </code></pre>
                        <p>
                            Get the <code>aggregatesHeight</code> property.
                        </p>
                        <pre><code>var aggregatesHeight = $('#treeGrid').jqxTreeGrid('aggregatesHeight'); </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5AL7t/">aggregatesHeight is set to 40</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span40'>autoShowLoadElement</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>autoShowLoadElement</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({autoShowLoadElement: false}); </code></pre>
                        <p>
                            Get the <code>autoShowLoadElement</code> property.
                        </p>
                        <pre><code>var autoShowLoadElement = $('#treeGrid').jqxTreeGrid('autoShowLoadElement'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GF3Ld/">autoShowLoadElement is set to false</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span48'>checkboxes</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether checkboxes are displayed or not.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>checkboxes</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({checkboxes: true}); </code></pre>
                        You can also set the <code>checkboxes</code> property to a function. The function's result should be <code>true</code> or <code>false</code> depending on whether you want a checkbox to be displayed or not.
                         <br />
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                            <li>Row Data - the row as a set of Key/Value pairs.</li>
                        </ul>
<pre><code>
checkboxes: function (rowKey, dataRow) {
    var level = dataRow.level;
    if (level == 0) {
        return true;
    }
    return false;
}
</code></pre>
                         <p>
                            Get the <code>checkboxes</code> property.
                        </p>
                        <pre><code>var checkboxes = $('#treeGrid').jqxTreeGrid('checkboxes'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fhbLa/">checkboxes is set to true</a></div>
                    </div>
                </td>
            </tr>  
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span41'>columnsHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   30
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the height of the columns header.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>columnsHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({columnsHeight: 40}); </code></pre>
                        <p>
                            Get the <code>columnsHeight</code> property.
                        </p>
                        <pre><code>var columnsHeight = $('#treeGrid').jqxTreeGrid('columnsHeight'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FppLy/">columnsHeight is set to 40</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span42'>columns</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                   []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets the jqxTreeGrid's columns.</p>
                          <br />   
                          List of properties:
<ul>
    <li>text - string property which sets the column header's text.</li>
    <li>dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.</li>
    <li>displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.</li>
    <li>sortable - boolean property which determines whether the column is sortable.</li>
    <li>filterable - boolean property which determines whether the column is filterable.</li>
    <li>hidden - boolean property which determines whether the column is visible or hidden.</li>
    <li>columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the <code>columnGroups</code>.</li>
    <li>renderer - callback function for custom rendering of the column's header.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>renderer: function (text, align, height) {<div/>    var checkBox = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div id=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'checkbox' style='z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;'</span>&gt;</span>"</span>;<div/>    checkBox += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>    return checkBox;<div/>}<div/></pre>
    </li>
    <li>rendered - callback function which is called after the column's header rendering is completed.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>rendered: function (element, align, height) {<div/>    element.jqxCheckBox();<div/>    element.on(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'change'</span>, function (event) {<div/>        if (!updatingSelectionFromtreeGrid) {<div/>            var args = event.args;<div/>            var rows = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'getRows'</span>);<div/>            updatingSelection = true;<div/>            if (args.checked) {<div/>                for (var i = 0; i &lt; rows.length; i++) {<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'selectRow'</span>, i);<div/>                }<div/><div/>            }<div/>            else {<div/>                $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'clearSelection'</span>);<div/>            }<div/>            updatingSelection = false;<div/>        }<div/>    });<div/>    return true;<div/>}<div/></pre>
    </li>
    <li>cellsRenderer - callback function which is called when a cell is being rendered. The result of that function should be valid and well-formatted HTML String.
       The cellsRenderer function has 4 parameters passed by jqxTreeGrid - row's key, column's data field, cell's value, row's data as an Object of Key/Value pairs.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>{<div/>    text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Details', align: 'center', dataField: 'lastname'</span>,<div/>    // row - row's key.<div/>    // column - column's data field.<div/>    // value - cell's value.<div/>    // rowData - rendered row's object.<div/>    cellsRenderer: function (row, column, value, rowData) {<div/>        var container = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"width: 100%; height: 100%;"</span>&gt;</span>'</span><div/>        var leftcolumn = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; width: 50%;"</span>&gt;</span>'</span>;<div/>        var rightcolumn = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; width: 50%;"</span>&gt;</span>'</span>;<div/>                      <div/>        var firstname = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>First Name:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.firstname + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var lastname = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Last Name:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.lastname + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var title = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Title:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.title + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var address = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Address:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.address + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>                            <div/>        leftcolumn += firstname;<div/>        leftcolumn += lastname;<div/>        leftcolumn += title;<div/>        leftcolumn += address;<div/>        leftcolumn += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/><div/>        var postalcode = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Postal Code:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.postalcode + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var city = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>City:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.city + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var phone = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Phone:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.homephone + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        var hiredate = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;b&gt;</span>Hire Date:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/b&gt;</span> " + rowData.hiredate + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/><div/>        rightcolumn += postalcode;<div/>        rightcolumn += city;<div/>        rightcolumn += phone;<div/>        rightcolumn += hiredate;<div/>        rightcolumn += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        container += leftcolumn;<div/>        container += rightcolumn;<div/>        container += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span>"</span>;<div/>        return container;<div/>    }<div/>}<div/></pre>
    </li>
    <li>columnType - string property which determines the column's type.<br /> Possible values:
        <ul>
           <li>"template" - sets a custom editor as a default editor for the column. The editor should be created in the <code>createEditor</code> callback function. The editor should be synchronized with the cell's value in the <code>initEditor</code> callback. The editor's value should be retrieved in the <code>getEditorValue</code> callback function.</li>
           <li>"custom" - sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the <code>createEditor</code> callback function which is called for each row when the <code>columnType</code> property is set to "custom". The editors should be synchronized with the cell's value in the <code>initEditor</code> callback. The editor's value should be retrieved in the <code>getEditorValue</code> callback function.</li>
        </ul>
    </li>
    <li>validation - callback function which is called when the jqxTreeGrid's edited row needs to be validated. The function has 2 parameters - edit cell and the cell's value. The function should return
    true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>validation: function (cell, value) {<div/>    var date = new Date(value);<div/>    if (date.getFullYear() &gt; 2014 || date.getFullYear() &lt; 1990) {<div/>        return { message: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Shipped Date should be in the 1990 - 2014 interval"</span>, result: false };<div/>    }<div/>    return true;<div/>}<div/></pre>
    </li>
   <li>initEditor - callback function which is called when an editor is opened. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be 
   used for adding some custom parameters to the editor.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>initEditor: function (row, cellValue, editor, width, height) {<div/>  // your code here<div/>}<div/></pre>
    </li>
   <li>createEditor - callback function which is called just once when the cells editor is created. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be 
   used for adding some custom parameters to the editor.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>createEditor: function (row, cellValue, editor, width, height) {<div/>  // your code here<div/>}<div/></pre>
    </li>
    <li>getEditorValue - callback function which could be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors. It has 3 parameters - row's key, cell's value and the editor element. The result of the function is expected to be the editor's new value.
   <h4>Code Example</h4>
 <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>getEditorValue: function (row, cellValue, editor) {<div/>  // your code here<div/>}<div/></pre>
    </li>
    <li>cellsFormat - determines the Format string used for formatting the cell values.<br />
<br />
Possible Number strings:
<br />
"d" - decimal numbers.
<br />
"f" - floating-point numbers.
<br />
"n" - integer numbers.
<br />
"c" - currency numbers.
<br />
"p" - percentage numbers.
<br />
<br />
For adding decimal places to the numbers, add a number after the formatting string.
<br />
For example: "c3" displays a number in this format $25.256 
<br />
Possible built-in Date formats:
<br />
<br />
// short date pattern
d: "M/d/yyyy",
<br />
// long date pattern
D: "dddd, MMMM dd, yyyy",
<br />
// short time pattern
t: "h:mm tt",
<br />
// long time pattern
T: "h:mm:ss tt",
<br />
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
<br />
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
<br />
// month/day pattern
M: "MMMM dd",
<br />
// month/year pattern
Y: "yyyy MMMM",
<br />
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
<br />
<br />  
Possible Date format strings:
<br />
<br />
"d"-the day of the month;<br />
"dd"-the day of the month;
<br />
"ddd"-the abbreviated name of the day of the week;<br />
"dddd"- the full name of the day of the week;<br />
"h"-the hour, using a 12-hour clock from 1 to 12;
<br />
"hh"-the hour, using a 12-hour clock from 01 to 12;
<br />
"H"-the hour, using a 24-hour clock from 0 to 23;<br />
"HH"- the hour, using a 24-hour clock from 00 to 23;
<br />
"m"-the minute, from 0 through 59;<br />
"mm"-the minutes,from 00 though59;<br />
"M"- the month, from 1 through 12;<br />
"MM"- the month, from 01 through 12;<br />
"MMM"-the abbreviated name of the month;<br />
"MMMM"-the full name of the month;<br />
"s"-the second, from 0 through 59;
<br />
"ss"-the second, from 00 through 59;
<br />
"t"- the first character of the AM/PM designator;<br />
"tt"-the AM/PM designator;
<br />
"y"- the year, from 0 to 99;
<br />
"yy"- the year, from 00 to 99;
<br />
"yyy"-the year, with a minimum of three digits;
<br />
"yyyy"-the year as a four-digit number;
<br />
    </li>
    <li>aggregates - array property which determines the column aggregates.<br /><br />
    <h4>Code Examples</h4>
    <pre><code>{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }</code></pre>
    <br />
    Aggregate functions:  
                                <ul>
                                    <li>'avg' - Average aggregate</li>
                                    <li>'count' - Count aggregate</li>
                                    <li>'min' - Min aggregate</li>
                                    <li>'max' - Max aggregate</li>
                                    <li>'sum' - Sum aggregate</li>
                                    <li>'product' - Product aggregate</li>
                                    <li>'stdev' - Standard deviation on a sample.</li>
                                    <li>'stdevp' - Standard deviation on an entire population.</li>
                                    <li>'varp' - Variance on an entire population.</li>
                                    <li>'var' - Variance on a sample.</li>
                                 </ul>
                                 <br />
                                Custom Aggregate<br />
<pre><code>
aggregates: [{ 'In Stock':
    function (aggregatedValue, currentValue) {
        if (currentValue) {
            return aggregatedValue + 1;
        }

        return aggregatedValue;
    }
}
</code></pre>
<br />
Custom Aggregate which aggregates values from two columns
<br />
<pre><code>
{ text: 'Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2', aggregates: [{ '<b>Total</b>':
            function (aggregatedValue, currentValue, column, record) {
                var total = currentValue * parseInt(record['quantity']);
                return aggregatedValue + total;
            }
        }]                  
 }
</code></pre>
<br />
'In Stock' - the aggregate's display name.
The function has 2 params - the aggregated value and the current value. It should return an aggregated value.
    </li>
    <li>aggregatesRenderer - callback function which could be used for customization of the aggregates rendering. It has 1 parameter - the column's aggregates.              
   <h4>Code Example</h4>
                        <p>
                            Apply aggregates.
                        </p>
<pre style='width: 630px; overflow: auto; max-height: 400px; max-width: 630px; margin: 0px;' class='code'>var data = [<div/>    {<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>        [<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    {<div/>                        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div/>                        children:<div/>                        [<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div/>                        ]<div/>                    },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> }<div/>                ]<div/>            },<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div/>                ]<div/>            },<div/>            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div/>        ]<div/>    }<div/>];<div/><div/>var source =<div/>    {<div/>        dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>        dataFields: [<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children", type: "array"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"location", type: "string"</span> }<div/>        ],<div/>        hierarchy:<div/>            {<div/>                root: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span><div/>            },<div/>        localData: data,<div/>        id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span><div/>    };<div/><div/>var dataAdapter = new $.jqx.dataAdapter(source, {<div/>    loadComplete: function () {<div/><div/>    }<div/>});<div/>// create jqxTreeGrid.<div/>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>{<div/>    source: dataAdapter,<div/>    altRows: true,<div/>    width: 680,<div/>    showSubAggregates: true,<div/>    columnsResize: true,<div/>    ready: function () {<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '1'</span>);<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '2'</span>);<div/>    },<div/>    columns: [<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Name", align: "center", dataField: "name"</span>, width: 270 },<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Location", dataField: "location", cellsAlign: "center", align: "center"</span>, width: 200 },<div/>        {<div/>            text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2"</span>,<div/>            aggregates: [{<div/>                <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Total'</span>:<div/>                function (aggregatedValue, currentValue, column, record) {<div/>                    return aggregatedValue + currentValue;<div/>                }<div/>            }],<div/>            aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) {<div/>                if (type == <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"aggregates"</span>) {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 4px; float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                else {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                var usd = dataAdapter.formatNumber(aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                renderString += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;table&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td rowspan=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'2'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;strong&gt;</span>Total: <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/strong&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + usd + " USD<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + euro + " EUR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/table&gt;</span>"</span>;<div/>                return renderString;<div/>            }<div/>        }<div/>    ]<div/>});<div/></pre> 
                      </li>
    <li>align - string property which determines the alignment of the column's header. Possible values: 'left', 'center' or 'right'</li>
    <li>cellsAlign - string property which determines the alignment of the column's cells. Possible values: 'left', 'center' or 'right'.</li>
    <li>width - numeric property which determines the column's width.</li>
    <li>minWidth - numeric property which determines the column's minimum width. Default value: 25.</li>
    <li>maxWidth - numeric property which determines the column's maximum width.</li>
    <li>resizable - boolean property which determines whether the column is resizable.</li>
    <li>draggable - boolean property which determines whether the column is draggable.</li>
    <li>editable - boolean property which determines whether the column is editable.</li>
    <li>className - string property which sets a custom CSS class for the column's header</li>
    <li>cellClassName - string or function property which sets a custom CSS class for the column's cells. The value could be a "String" or "Function".
        <br />
        Apply a CSS class to all cells in the column.
        <pre><code>
text: 'Ship Name', datafield: 'ShipName', width: 150, cellclassname: "yellowCell" 
        </code></pre>
        <br />
        Apply a conditional CSS Class depending on the cell's value.
        <pre><code>
text: 'Ship Name', dataField: 'ShipName', width: 150,
cellClassName: function (row, column, value, data) {
    if (value == "Hanari Carnes") {
        return "yellowCell";
    }
}
        </code></pre>
    </li>
    <li>pinned - boolean property which determines whether the column is pinned(frozen).</li>
    </ul>                  
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>columns</code> property.
                        </p>
                        <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#table"</span>).jqxTreeGrid(<div/>{<div/>    altrows: true,<div/>    sortable: true,<div/>    columns: [<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'First Name', dataField: 'First Name'</span>, width: 100 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Last Name', dataField: 'Last Name'</span>, width: 100 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Product', dataField: 'Product'</span>, width: 180 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2'</span> },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right'</span> }<div/>    ]<div/>});<div/></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eYLAm/">columns is set to a custom array</a></div>
                         </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span43'>columnGroups</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                   []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets the jqxTreeGrid's column groups.</p> The columnGroups property enables you to create a jqxTreeGrid with multi column headers. 
                         List of properties:
                         <ul>
                               <li>parentGroup - string property which determines the parent group's name.</li>
                               <li>name - string property which determines the group's name.</li>
                               <li>align - string property which determines the column header's alignment. Possible values: 'left', 'center' or 'right'.</li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>columnGroups</code> property.
                        </p>
<pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>// prepare the data<div/>var source =<div/>{<div/>    dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"xml"</span>,<div/>    dataFields: [<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'SupplierName', type: 'string'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Quantity', type: 'number'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'OrderDate', type: 'date'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'OrderAddress', type: 'string'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Freight', type: 'number'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Price', type: 'number'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'City', type: 'string'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ProductName', type: 'string'</span> },<div/>            { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Address', type: 'string'</span> }<div/>    ], <div/>    url: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'../sampledata/orderdetailsextended.xml'</span>,<div/>    root: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'DATA'</span>,<div/>    record: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ROW'</span><div/>};<div/>var dataAdapter = new $.jqx.dataAdapter(source, {<div/>    loadComplete: function () {<div/><div/>    }<div/>});<div/>// create jqxTreeGrid.<div/>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>{<div/>    width: 690,<div/>    height: 400,<div/>    source: dataAdapter,<div/>    pageable: true,<div/>    altRows: true,<div/>    columnsResize: true,<div/>    columns: [<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName'</span>, width: 110 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName'</span>, width: 120 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center'</span>, width: 80 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center'</span>, width: 100 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate'</span>, width: 100 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress'</span>, width: 100 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center'</span>, width: 70 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address'</span>, width: 120 },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City'</span>, width: 80 }<div/>    ],<div/>    columnGroups: <div/>    [<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Product Details', align: 'center', name: 'ProductDetails'</span> },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails'</span> },<div/>        { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Location', align: 'center', name: 'Location'</span> }<div/>    ]<div/>});<div/></pre>        
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2Q78g/">columnGroups is set to a custom array</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span44'>columnsResize</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's columnsResize.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>columnsResize</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({columnsResize: false});</code></pre>
                        <p>
                            Get the <code>columnsResize</code> property.
                        </p>
                        <pre><code>var columnsResize = $('#treeGrid').jqxTreeGrid('columnsResize');</code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/w6haY/">columnsResize is set to true</a></div>
                     </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span111'>columnsReorder</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's columnsReorder.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>columnsReorder</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({columnsReorder: false});</code></pre>
                        <p>
                            Get the <code>columnsReorder</code> property.
                        </p>
                        <pre><code>var columnsReorder = $('#treeGrid').jqxTreeGrid('columnsReorder');</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LQAfD/">columnsReorder is set to true</a></div>
                     </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxTreeGrid is disabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ disabled:true }); </code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#treeGrid').jqxTreeGrid('disabled');</code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/582WX/">disabled is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span45'>editable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxTreeGrid editing is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>editable</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ editable:true }); </code></pre>
                        <p>
                            Get the <code>editable</code> property.
                        </p>
                        <pre><code>var editable = $('#treeGrid').jqxTreeGrid('editable');</code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fwasb/">editable is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span46'>editSettings</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's edit settings.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>editSettings</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ editSettings:{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true } }); </code></pre>
                        <p>
                            Get the <code>editSettings</code> property.
                        </p>
                        <pre><code>var editSettings = $('#treeGrid').jqxTreeGrid('editSettings');</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3zGhL/">editSettings is set to a custom object</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span109'>exportSettings</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                     {columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: "jqxTreeGrid"}
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Determines the Data Export settings used by jqxTreeGrid when <code>exportData</code> is called. See also the <code>exportData</code> method.</p>
                        List of parameters:
                        <ul>
                            <li>columnsHeader - Boolean value. Determines whether the columns header is exported. Note that Stacked Headers are not exported.</li>
                            <li>hiddenColumns - Boolean value. Determines whether the hidden columns would be exported.</li>
                            <li>serverURL - String or Null. Determines the Exporter File's URL.</li>
                            <li>characterSet - String value. Determines the character set used by the exporter.</li>
                            <li>collapsedRecords - Boolean value. Determines whether the collapsed records would be included in the export.</li>
                            <li>recordsInView - Boolean value. Determines whether the filtered/sorted set of records would be exported. Otherwise, the widget would not take into account the filtering and sorting.</li>
                            <li>fileName - String value. Determines the export file's name.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <pre style="max-width: 630px; overflow: auto; width: 630px; max-height: 400px; height: 400px;"><code>
var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }];

//// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    ready: function () {
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [
        { text: 'First Name', dataField: 'FirstName', width: 150 },
        { text: 'Last Name', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country', width: 120 }
    ]
});

$("#excelExport").jqxButton();
$("#xmlExport").jqxButton();
$("#csvExport").jqxButton();
$("#tsvExport").jqxButton();
$("#htmlExport").jqxButton();
$("#jsonExport").jqxButton();

$("#excelExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'xls');
});
$("#xmlExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'xml');
});
$("#csvExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'csv');
});
$("#tsvExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'tsv');
});
$("#htmlExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'html');
});
$("#jsonExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'json');
});
                        </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5JkK3/">exportSettings is set to a custom object</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>enableHover</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether row highlighting is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>enableHover</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({enableHover: false }); </code></pre>
                        <p>
                            Get the <code>enableHover</code> property.
                        </p>
                        <pre><code>var enableHover = $('#treeGrid').jqxTreeGrid('enableHover'); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FmbG9/">enableHover is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>enableBrowserSelection</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables or disables the default text selection of the web browser.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>enableBrowserSelection</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({enableBrowserSelection: true }); </code></pre>
                        <p>
                            Get the <code>enableBrowserSelection</code> property.
                        </p>
                        <pre><code>var enableBrowserSelection = $('#treeGrid').jqxTreeGrid('enableBrowserSelection'); </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8wY9T/">enableBrowserSelection is set to true</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>filterable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables/Disables the filtering feature.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>filterable</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({filterable: true}); </code></pre>
                        <p>
                            Get the <code>filterable</code> property.
                        </p>
                        <pre><code>var filterable = $('#treeGrid').jqxTreeGrid('filterable'); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6sWLP/">filterable is set to true</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>filterHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   30
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the Filter Element's height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>filterHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({filterHeight: 40}); </code></pre>
                        <p>
                            Get the <code>filterHeight</code> property.
                        </p>
                        <pre><code>var filterHeight = $('#treeGrid').jqxTreeGrid('filterHeight'); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sJayM/">filterHeight is set to 40</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>filterMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   "default"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines the Filter's mode. Possible values: <code>"default"</code>, <code>"simple"</code> and <code>"advanced"</code></p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>filterMode</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({filterMode: "advanced"}); </code></pre>
                        <p>
                            Get the <code>filterMode</code> property.
                        </p>
                        <pre><code>var filterMode = $('#treeGrid').jqxTreeGrid('filterMode'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/AkEBb/">filterMode is set to 'advanced'</a></div>
                    </div>
                </td>
            </tr>    
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({height:"400px"});</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#treeGrid').jqxTreeGrid('height');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/34eW3/">height is set to 200</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span47'>icons</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether icons are displayed or not.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>icons</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({icons: true}); </code></pre>
                        You can also set the <code>icons</code> property to a function. The function's result should be the <code>Icon's URL</code> or <code>false</code>(in case you do not want an Icon to be displayed).
                         <br />
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                            <li>Row Data - the row as a set of Key/Value pairs.</li>
                        </ul>
<pre><code>
icons: function (rowKey, dataRow) {
    var level = dataRow.level;
    if (level == 0) {
        return "../../images/img1.png";
    }
    return false;
}
</code></pre>
                         <p>
                            Get the <code>icons</code> property.
                        </p>
                        <pre><code>var icons = $('#treeGrid').jqxTreeGrid('icons'); </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jDX6C/">icons is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span112'>incrementalSearch</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether the incremental search is enabled. The feature allows you to quickly find and select data records by typing when the widget is on focus.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>incrementalSearch</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({incrementalSearch:false});</code></pre>
                        <p>
                            Get the <code>incrementalSearch</code> property.
                        </p>
                        <pre><code>var incrementalSearch = $('#treeGrid').jqxTreeGrid('incrementalSearch');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R9dmJ/">incrementalSearch is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span50'>localization</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    default localization strings.
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Applies a localization to the jqxTreeGrid's Strings.</p>
                        Default localization object:
                        <br />
                        <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>{           <div/>        // separator of parts of a date (e.g. <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'/'</span> in 11/05/1955)<div/>	<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'/'</span>: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"/"</span>,<div/>	// separator of parts of a time (e.g. <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">':'</span> in 05:44 PM)<div/>	<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">':'</span>: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">":"</span>,<div/>	// the first day of the week (0 = Sunday, 1 = Monday, etc)<div/>	firstDay: 0,<div/>	days: {<div/>		// full day names<div/>		names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"</span>],<div/>		// abbreviated day names<div/>		namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"</span>],<div/>		// shortest day names<div/>		namesShort: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"</span>]<div/>	},<div/>	months: {<div/>		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)<div/>		names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""</span>],<div/>		// abbreviated month names<div/>		namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""</span>]<div/>	},<div/>	// AM and PM designators in one of these forms:<div/>	// The usual view, and the upper and lower case versions<div/>	//      [standard,lowercase,uppercase]<div/>	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)<div/>	//      null<div/>	AM: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"AM", "am", "AM"</span>],<div/>	PM: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"PM", "pm", "PM"</span>],<div/>	eras: [<div/>	// eras in reverse chronological order.<div/>	// name: the name of the era in this culture (e.g. A.D., C.E.)<div/>	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.<div/>	// offset: offset in years from gregorian calendar<div/>	{ <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name": "A.D.", "start": null, "offset"</span>: 0 }<div/>	],<div/>	twoDigitYearMax: 2029,<div/>	patterns: {<div/>		// short date pattern<div/>		d: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"M/d/yyyy"</span>,<div/>		// long date pattern<div/>		D: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy"</span>,<div/>		// short time pattern<div/>		t: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"h:mm tt"</span>,<div/>		// long time pattern<div/>		T: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"h:mm:ss tt"</span>,<div/>		// long date, short time pattern<div/>		f: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy h:mm tt"</span>,<div/>		// long date, long time pattern<div/>		F: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy h:mm:ss tt"</span>,<div/>		// month/day pattern<div/>		M: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MMMM dd"</span>,<div/>		// month/year pattern<div/>		Y: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy MMMM"</span>,<div/>		// S is a sortable format that does not vary by culture<div/>		S: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"</span>,<div/>		// formatting of dates in MySQL DataBases<div/>		ISO: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy-MM-dd hh:mm:ss"</span>,<div/>		ISO2: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy-MM-dd HH:mm:ss"</span>,<div/>		d1: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd.MM.yyyy"</span>,<div/>		d2: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MM-yyyy"</span>,<div/>		d3: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MMMM-yyyy"</span>,<div/>		d4: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MM-yy"</span>,<div/>		d5: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"H:mm"</span>,<div/>		d6: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm"</span>,<div/>		d7: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm tt"</span>,<div/>		d8: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd/MMMM/yyyy"</span>,<div/>		d9: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MMMM-dd"</span>,<div/>		d10: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MM-dd"</span>,<div/>		d11: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MM-dd-yyyy"</span><div/>	},<div/>	percentSymbol: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"%"</span>,<div/>	currencySymbol: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"$"</span>,<div/>	currencySymbolposition: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"before"</span>,<div/>	decimalSeparator: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.'</span>,<div/>	thousandsSeparator: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">','</span>,<div/>	pagerGoToPageString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Go to page:"</span>,<div/>	pagerShowRowsString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Show rows:"</span>,<div/>	pagerRangeString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" of "</span>,<div/>	pagerPreviousButtonString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"previous"</span>,<div/>	pagerNextButtonString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"next"</span>,<div/>	pagerFirstButtonsSring: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"first"</span>,<div/>	pagerLastButtonString:<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"last"</span>,<div/>	filterApplyString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Apply"</span>,<div/>	filterCancelString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Cancel"</span>,<div/>	filterClearString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Clear Filter"</span>,<div/>	filterString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"advanced"</span>,<div/>	filterSearchString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Search:"</span>,<div/>	filterStringComparisonOperators: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'empty', 'not empty', 'contains', 'contains(match case)'</span>,<div/>	   <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)'</span>,<div/>	   <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'</span>],<div/>	filterNumericComparisonOperators: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'</span>],<div/>	filterDateComparisonOperators: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'</span>],<div/>	filterBooleanComparisoOoperators: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'equal', 'not equal'</span>],<div/>	validationString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Entered value is not valid"</span>,<div/>	emptyDataString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"No data to display"</span>,<div/>	filterSelectString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Select Filter"</span>,<div/>	loadText: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Loading..."</span>,<div/>	clearString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Clear"</span>,<div/>	todayString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Today"</span>,<div/>	loadingErrorMessage: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxTreeGrid raises the <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'bindingComplete'</span> event when the binding is completed."</span>           <div/>};<div/><div/></pre>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>localization</code> property.
                        </p>
<pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;!DOCTYPE html&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;head&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/jquery-1.10.2.min.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxcore.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdata.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxbuttons.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxscrollbar.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxlistbox.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdropdownlist.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxmenu.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxpanel.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxcalendar.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxTreeGrid.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxnumberinput.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/demos.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/globalization/globalize.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../sampledata/generatedata.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>&gt;</span><div/>        $(document).ready(function () {<div/>            var data = generatedata(250);<div/>            var source =<div/>            {<div/>                localdata: data,<div/>                dataFields:<div/>                [<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'name', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'productname', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'available', type: 'bool'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'date'</span>},<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'quantity', type: 'number'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'price', type: 'number'</span> }<div/>                ],<div/>                datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"array"</span><div/>            };<div/><div/>            var dataAdapter = new $.jqx.dataAdapter(source);<div/><div/>            var getLocalization = function () {<div/>                var localizationobj = {};<div/>                localizationobj.pagerGoToPageString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Gehe zu:"</span>;<div/>                localizationobj.pagerShowRowsString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zeige Zeile:"</span>;<div/>                localizationobj.pagerRangeString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" von "</span>;<div/>                localizationobj.pagerNextButtonString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"voriger"</span>;<div/>                localizationobj.pagerFirstButtonString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"first"</span>;<div/>                localizationobj.pagerLastButtonString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"last"</span>;<div/>                localizationobj.pagerPreviousButtonString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"nächster"</span>;<div/>                localizationobj.sortAscendingString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sortiere aufsteigend"</span>;<div/>                localizationobj.sortDescendingString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sortiere absteigend"</span>;<div/>                localizationobj.sortRemoveString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Entferne Sortierung"</span>;<div/>                localizationobj.firstDay = 1;<div/>                localizationobj.percentSymbol = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"%"</span>;<div/>                localizationobj.currencySymbol = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"€"</span>;<div/>                localizationobj.currencySymbolPosition = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"after"</span>;<div/>                localizationobj.decimalSeparator = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"."</span>;<div/>                localizationobj.thousandsSeparator = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">","</span>;<div/>                var days = {<div/>                    // full day names<div/>                    names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"</span>],<div/>                    // abbreviated day names<div/>                    namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"</span>],<div/>                    // shortest day names<div/>                    namesShort: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"</span>]<div/>                };<div/>                localizationobj.days = days;<div/>                var months = {<div/>                    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)<div/>                    names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""</span>],<div/>                    // abbreviated month names<div/>                    namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""</span>]<div/>                };<div/>                var patterns = {<div/>                    d: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd.MM.yyyy"</span>,<div/>                    D: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, d. MMMM yyyy"</span>,<div/>                    t: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm"</span>,<div/>                    T: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm:ss"</span>,<div/>                    f: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, d. MMMM yyyy HH:mm"</span>,<div/>                    F: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, d. MMMM yyyy HH:mm:ss"</span>,<div/>                    M: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd MMMM"</span>,<div/>                    Y: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MMMM yyyy"</span><div/>                }<div/>                localizationobj.patterns = patterns;<div/>                localizationobj.months = months;<div/>                return localizationobj;<div/>            }<div/><div/>            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>            {<div/>                width: 685,<div/>                source: dataAdapter,<div/>                filterable: true,<div/>                pageable: true,<div/>                editable: true,<div/>                localization: getLocalization(),<div/>                columns: [<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', dataField: 'name'</span>, width: 115 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Produkt', dataField: 'productname'</span>, width: 220 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Datum', dataField: 'date', width: 210, cellsAlign: 'right', cellsFormat: 'd'</span>},<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Qt.', dataField: 'quantity', cellsAlign: 'right'</span>, width: 60 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Preis', dataField: 'price', cellsFormat: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"c2"</span>, cellsAlign: 'right'</span> }<div/>                ]<div/>            });<div/>        });<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/head&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"treeGrid"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/body&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/html&gt;</span><div/><div/></pre>                    
                        <p>
                            Get the <code>localization</code> property.
                        </p>
                        <pre><code>var localization = $('#treeGrid').jqxTreeGrid('localization');</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gz93S/">localization is set to a custom object</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>pagerHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    28
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the height of the jqxTreeGrid's Pager(s). Pager(s) is(are) displayed after setting <code>pageable</code> to true.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pagerHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ pagerHeight: 35 }); </code></pre>
                        <p>
                            Get the <code>pagerHeight</code> property.
                        </p>
                        <pre><code>var pagerHeight = $('#treeGrid').jqxTreeGrid('pagerHeight'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gz93S/">localization is set to a custom object</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>pageSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the rows count per page when paging is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pageSize</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ pageSize: 20 }); </code></pre>
                        <p>
                            Get the <code>pageSize</code> property.
                        </p>
                        <pre><code>var pageSize = $('#treeGrid').jqxTreeGrid('pageSize'); </code></pre>
                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NTVQY/">pageSize is set to 20</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>pageSizeOptions</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    ['5', '10', '20']
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets the jqxTreeGrid's page size options when paging is enabled and the <code>pagerMode</code> property is set to <code>"advanced"</code>.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pageSizeOptions</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ pageSizeOptions: ['15', '20', '30'] }); </code></pre>
                        <p>
                            Get the <code>pageSizeOptions</code> property.
                        </p>
                        <pre><code>var pageSizeOptions = $('#treeGrid').jqxTreeGrid('pageSizeOptions'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WLuPB/">pageSizeOptions is set to ['2', '3', '5']</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>pageable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Determines whether the jqxTreeGrid is in paging mode.</p>              
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pageable</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ pageable:true }); </code></pre>
                        <p>
                            Get the <code>pageable</code> property.
                        </p>
                        <pre><code>var pageable = $('#treeGrid').jqxTreeGrid('pageable'); </code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/AASxb/">pageable is set to true</a></div>
                    </div>
                </td>
            </tr>  
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>pagerPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   "bottom"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Pager's position. Possible values: <code>'top'</code>, <code>'bottom'</code> and <code>'both'</code></p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pagerPosition</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ pagerPosition:'top' }); </code></pre>
                        <p>
                            Get the <code>pagerPosition</code> property.
                        </p>
                        <pre><code>var hasThreeStates = $('#treeGrid').jqxTreeGrid('pagerPosition'); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c7ch2/">pagerPosition is set to 'top'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>pagerMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   "default"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets the Pager's mode. Possible values: <code>"default"</code> and <code>"advanced"</code></p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pagerMode</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({pagerMode: "advanced" }); </code></pre>
                        <p>
                            Get the <code>pagerMode</code> property.
                        </p>
                        <pre><code>var pagerMode = $('#treeGrid').jqxTreeGrid('pagerMode'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qwUU3/">pagerMode is set to 'advanced'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>pagerButtonsCount</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   5
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets the count of the buttons displayed on the Pager when <code>pagerMode</code> is set to <code>"default"</code>.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pagerButtonsCount</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({pagerButtonsCount: 10 }); </code></pre>
                        <p>
                            Get the <code>pagerButtonsCount</code> property.
                        </p>
                        <pre><code>var pagerButtonsCount = $('#treeGrid').jqxTreeGrid('pagerButtonsCount'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dn3Ab/">pagerButtonsCount is set to 2</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>pagerRenderer</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables custom rendering of the Pager.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>pagerRenderer</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({pagerRenderer: function(){"do something here and return a HTML Element as a result." }); </code></pre>
                        <p>
                            Get the <code>pagerRenderer</code> property.
                        </p>
                        <pre><code>var pagerRenderer = $('#treeGrid').jqxTreeGrid('pagerRenderer'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u395a/">pagerRenderer is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span52'>ready</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function which is called when the jqxTreeGrid is rendered and data binding is completed..</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>ready</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({ready:function(){ // your code here.}});</code></pre>
                        <p>
                            Get the <code>ready</code> property.
                        </p>
                        <pre><code>var ready = $('#treeGrid').jqxTreeGrid('ready');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gb9G9/">ready is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span53'>rowDetails</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxTreeGrid rows have details. See the <code>rowDetailsRenderer</code> for rendering of the row details.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>rowDetails</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({rowDetails: true});</code></pre>
                        <p>
                            Get the <code>rowDetails</code> property.
                        </p>
                        <pre><code>var rowDetails = $('#treeGrid').jqxTreeGrid('rowDetails');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Cyc9V/">rowDetails is set to true</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span49'>rowDetailsRenderer</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function which is used for rendering of the row's details.</p>
                        <br />
                        List of parameters:
                        <ul>
                            <li>id/key - row's id/key.</li>
                            <li>dataRow - the row as a set of Key/Value pairs.</li>
                        </ul>
                        <br />
                        If <code>rowDetailsRenderer</code> returns false, the row's details would be collapsed.
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>rowDetailsRenderer</code> property.
                        </p>
<pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;!DOCTYPE html&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;head&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>&gt;</span>jqxTreeGrid allows you to create an extra row for each tree-grid data record.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;meta name=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"description" content="Data Row Details - JavaScript Tree Grid Demo | jQWidgets"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/jquery-1.10.2.min.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxcore.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdata.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxbuttons.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxscrollbar.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdatatable.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxtreegrid.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/demos.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>&gt;</span><div/>        $(document).ready(function () {<div/>            var employees = [{ <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd."</span> }];<div/><div/>            //// prepare the data<div/>            var source =<div/>            {<div/>                dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>                dataFields: [<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'EmployeeID', type: 'number'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ReportsTo', type: 'number'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'FirstName', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'LastName', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Country', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'City', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Address', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Title', type: 'string'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'HireDate', type: 'date'</span> },<div/>                    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'BirthDate', type: 'date'</span> }<div/>                ],<div/>                hierarchy:<div/>                {<div/>                    keyDataField: { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'EmployeeID'</span> },<div/>                    parentDataField: { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ReportsTo'</span> }<div/>                },<div/>                id: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'EmployeeID'</span>,<div/>                localData: employees<div/>            };<div/>            var dataAdapter = new $.jqx.dataAdapter(source, {<div/>                beforeLoadComplete: function (records) {<div/>                    var notes = [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Education includes a BA in psychology from Colorado State University in 1970.  She also completed <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'The Art of the Cold Call.'</span>  Nancy is a member of Toastmasters International."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Successful Telemarketing' and 'International Sales Management.'</span>  He is fluent in French."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Multi-Cultural Selling' and 'Time Management for the Sales Professional.'</span>  He is fluent in Japanese and can read and write French, Portuguese, and Spanish."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Selling in Europe,'</span> he was transferred to the London office in March 1993."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French."</span>,<div/>                         <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German."</span>];<div/><div/>                    for (var i = 0; i &lt; records.length; i++) {<div/>                        var imgUrl = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'../../images/' + records[i].FirstName.toLowerCase() + '.png'</span>;<div/>                        records[i].icon = imgUrl;<div/>                        records[i].notes = notes[i];<div/>                    }<div/>                    return records;<div/>                }<div/>            }<div/>            );<div/>            // create Tree Grid<div/>            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>            {<div/>                width: 600,<div/>                pageable: true,<div/>                pageSize: 3,<div/>                source: dataAdapter,<div/>                rowDetails: true,<div/>                rowDetailsRenderer: function (rowKey, row) {<div/>                    var indent = (1+row.level) * 20;<div/>                    var details = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;table style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px; margin-left: " + indent + "px;'&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;img height='60' src='" + row.icon + "'</span>/&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + row.notes + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/table&gt;</span>"</span>;<div/>                    return details;<div/>                },<div/>                ready: function () {<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid").jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, "2"</span>);<div/>                },<div/>                columns: [<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'FirstName', dataField: 'FirstName'</span>, width: 150 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'LastName', dataField: 'LastName'</span>, width: 120 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'City', dataField: 'City'</span>, width: 120 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Country', dataField: 'Country'</span> }<div/>                ]<div/>            });<div/>        });<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/head&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"treeGrid"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/body&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/html&gt;</span><div/><div/></pre>
                        <p>
                            Get the <code>rowDetailsRenderer</code> property.
                        </p>
                        <pre><code>var rowDetailsRenderer = $('#treeGrid').jqxTreeGrid('rowDetailsRenderer');</code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/REL6a/">rowDetailsRenderer is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>renderToolbar</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables custom rendering of the Toolbar.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>renderToolbar</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({renderToolbar: function(toolBar){"toolBar - The jQuery selection of the Toolbar HTML Element" }); </code></pre>
                        <p>
                            Get the <code>renderToolbar</code> property.
                        </p>
                        <pre><code>var renderToolbar = $('#treeGrid').jqxTreeGrid('renderToolbar'); </code></pre>
                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Vq76M/">renderToolbar is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>renderStatusbar</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables custom rendering of the Statusbar.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>renderStatusbar</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({renderStatusbar: function(statusBar){"statusBar - The jQuery selection of the Statusbar HTML Element" }); </code></pre>
                        <p>
                            Get the <code>renderStatusbar</code> property.
                        </p>
                        <pre><code>var renderStatusbar = $('#treeGrid').jqxTreeGrid('renderStatusbar'); </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yW977/">renderStatusbar is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>rendering</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Callback function which is called before the rendering of the jqxTreeGrid's rows.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>rendering</code> property.
                        </p>
<pre style='width: 630px; max-width: 630px; margin: 0px; max-height:400px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;!DOCTYPE html&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;head&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/jquery-1.10.2.min.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxcore.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxbuttons.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxscrollbar.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdatatable.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxtreegrid.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxlistbox.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdropdownlist.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdata.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxtooltip.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxinput.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>&gt;</span><div/>        var that = this;<div/>        $(document).ready(function () {<div/>            var data = [<div/>              {<div/>                  <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div/>                  <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                   [<div/>                       {<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                           [<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> },<div/>                               {<div/>                                   <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div/>                                   children:<div/>                                   [<div/>                                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div/>                                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div/>                                   ]<div/>                               }<div/>                           ]<div/>                       },<div/>                       {<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                           [<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div/>                           ]<div/>                       },<div/>                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div/>                   ]<div/>              }<div/>            ];<div/><div/>            var source =<div/>             {<div/>                 dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>                 dataFields: [<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children", type: "array"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"location", type: "string"</span> }<div/>                 ],<div/>                 hierarchy:<div/>                     {<div/>                         root: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span><div/>                     },<div/>                 localData: data,<div/>                 id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span><div/>             };<div/><div/>            var dataAdapter = new $.jqx.dataAdapter(source, {<div/>                loadComplete: function () {<div/><div/>                }<div/>            });<div/><div/>            this.editrow = -1;<div/>         <div/>            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>            {<div/>                width: 670,<div/>                source: dataAdapter,<div/>                altrows: true,<div/>                autoRowHeight: false,<div/>                ready: function()<div/>                {<div/>                    // Expand rows with ID = 1, 2 and 7<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 1);<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 2);<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 7);<div/>                },<div/>                editable: true,<div/>                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },<div/>                // called when jqxTreeGrid is going to be rendered.<div/>                rendering: function()<div/>                {<div/>                    // destroys all buttons.<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).jqxButton(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'destroy'</span>);<div/>                    }<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).jqxButton(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'destroy'</span>);<div/>                    }<div/>                },<div/>                // called when jqxTreeGrid is rendered.<div/>                rendered: function () {<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).jqxButton();<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).jqxButton();<div/>                        <div/>                        var editClick = function (event) {<div/>                            var target = $(event.target);<div/>                            // get button's value.<div/>                            var value = target.val();<div/>                            // get clicked row.<div/>                            var rowKey = event.target.getAttribute(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'data-row'</span>);<div/><div/>                            if (value == <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Edit"</span>) {<div/>                                // begin edit.<div/>                                $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'beginRowEdit'</span>, rowKey);<div/>                                target.parent().find(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.cancelButtons'</span>).show();<div/>                                target.val(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Save"</span>);<div/>                            }<div/>                            else {<div/>                                // end edit and save changes.<div/>                                target.parent().find(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.cancelButtons'</span>).hide();<div/>                                target.val(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Edit"</span>);<div/>                                $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'endRowEdit'</span>, rowKey);<div/>                            }<div/>                        }<div/><div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).on(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'click'</span>, function (event) {<div/>                            editClick(event);<div/>                        });<div/>                 <div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).click(function (event) {<div/>                            // end edit and cancel changes.<div/>                            var rowKey = event.target.getAttribute(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'data-row'</span>);<div/>                            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'endRowEdit'</span>, rowKey, true);<div/>                        });<div/>                    }<div/>                },<div/>                columns: [<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ID', editable: false, dataField: 'id'</span>, width: 100 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', dataField: 'name'</span>, width: 200 },<div/>                  {<div/>                      text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget'</span>, width: 150<div/>                  },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Location', dataField: 'location'</span>, width: 100 },<div/>                  {<div/>                      text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Edit', cellsAlign: 'center', align: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"center"</span>, columnType: 'none'</span>, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {<div/>                          // render custom column.<div/>                          return <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;button data-row=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'" + row + "' class='editButtons'&gt;</span>Edit<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/button&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'</span>&gt;</span>Cancel<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/button&gt;</span>"</span>;<div/>                      }<div/>                  }<div/>                ]<div/>            });<div/>        });<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/head&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"treeGrid"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/body&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/html&gt;</span><div/><div/></pre>
                        <p>
                            Get the <code>rendering</code> property.
                        </p>
                        <pre><code>var renderer = $('#treeGrid').jqxTreeGrid('renderer'); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cK2QZ/">rendering is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>rendered</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Callback function which is called after the rendering of the jqxTreeGrid's row.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>rendered</code> property.
                        </p>
<pre style='width: 630px; max-width: 630px; margin: 0px; max-height:400px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;!DOCTYPE html&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;head&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../scripts/jquery-1.10.2.min.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxcore.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxbuttons.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxscrollbar.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdatatable.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxtreegrid.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxlistbox.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdropdownlist.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxdata.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxtooltip.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../jqwidgets/jqxinput.js"</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>&gt;</span><div/>        var that = this;<div/>        $(document).ready(function () {<div/>            var data = [<div/>              {<div/>                  <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div/>                  <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                   [<div/>                       {<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                           [<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> },<div/>                               {<div/>                                   <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div/>                                   children:<div/>                                   [<div/>                                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div/>                                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div/>                                   ]<div/>                               }<div/>                           ]<div/>                       },<div/>                       {<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div/>                           <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                           [<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div/>                               { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div/>                           ]<div/>                       },<div/>                       { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div/>                   ]<div/>              }<div/>            ];<div/><div/>            var source =<div/>             {<div/>                 dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>                 dataFields: [<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children", type: "array"</span> },<div/>                      { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"location", type: "string"</span> }<div/>                 ],<div/>                 hierarchy:<div/>                     {<div/>                         root: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span><div/>                     },<div/>                 localData: data,<div/>                 id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span><div/>             };<div/><div/>            var dataAdapter = new $.jqx.dataAdapter(source, {<div/>                loadComplete: function () {<div/><div/>                }<div/>            });<div/><div/>            this.editrow = -1;<div/>         <div/>            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>            {<div/>                width: 670,<div/>                source: dataAdapter,<div/>                altrows: true,<div/>                autoRowHeight: false,<div/>                ready: function()<div/>                {<div/>                    // Expand rows with ID = 1, 2 and 7<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 1);<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 2);<div/>                    $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow'</span>, 7);<div/>                },<div/>                editable: true,<div/>                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },<div/>                // called when jqxTreeGrid is going to be rendered.<div/>                rendering: function()<div/>                {<div/>                    // destroys all buttons.<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).jqxButton(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'destroy'</span>);<div/>                    }<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).jqxButton(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'destroy'</span>);<div/>                    }<div/>                },<div/>                // called when jqxTreeGrid is rendered.<div/>                rendered: function () {<div/>                    if ($(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).length &gt; 0) {<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).jqxButton();<div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).jqxButton();<div/>                        <div/>                        var editClick = function (event) {<div/>                            var target = $(event.target);<div/>                            // get button's value.<div/>                            var value = target.val();<div/>                            // get clicked row.<div/>                            var rowKey = event.target.getAttribute(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'data-row'</span>);<div/><div/>                            if (value == <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Edit"</span>) {<div/>                                // begin edit.<div/>                                $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'beginRowEdit'</span>, rowKey);<div/>                                target.parent().find(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.cancelButtons'</span>).show();<div/>                                target.val(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Save"</span>);<div/>                            }<div/>                            else {<div/>                                // end edit and save changes.<div/>                                target.parent().find(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.cancelButtons'</span>).hide();<div/>                                target.val(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Edit"</span>);<div/>                                $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'endRowEdit'</span>, rowKey);<div/>                            }<div/>                        }<div/><div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".editButtons"</span>).on(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'click'</span>, function (event) {<div/>                            editClick(event);<div/>                        });<div/>                 <div/>                        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".cancelButtons"</span>).click(function (event) {<div/>                            // end edit and cancel changes.<div/>                            var rowKey = event.target.getAttribute(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'data-row'</span>);<div/>                            $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'endRowEdit'</span>, rowKey, true);<div/>                        });<div/>                    }<div/>                },<div/>                columns: [<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ID', editable: false, dataField: 'id'</span>, width: 100 },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', dataField: 'name'</span>, width: 200 },<div/>                  {<div/>                      text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget'</span>, width: 150<div/>                  },<div/>                  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Location', dataField: 'location'</span>, width: 100 },<div/>                  {<div/>                      text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Edit', cellsAlign: 'center', align: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"center"</span>, columnType: 'none'</span>, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {<div/>                          // render custom column.<div/>                          return <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;button data-row=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'" + row + "' class='editButtons'&gt;</span>Edit<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/button&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'</span>&gt;</span>Cancel<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/button&gt;</span>"</span>;<div/>                      }<div/>                  }<div/>                ]<div/>            });<div/>        });<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/script&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/head&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"treeGrid"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/body&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/html&gt;</span><div/><div/></pre>
                         <p>
                            Get the <code>rendered</code> property.
                        </p>
                        <pre><code>var rendered = $('#treeGrid').jqxTreeGrid('rendered'); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/44RyM/">rendered is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
                       <h4>
                            Code example</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({rtl : true}); </code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#treeGrid').jqxTreeGrid('rtl'); </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q6A2X/">rtl is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span61'>source</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines the jqxTreeGrid's data source. The <code>source</code> property is expected to point to an instance of jqxDataAdapter. For more information about jqxDataAdapter, visit: <a href="http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm">jquery-data-adapter.htm</a>. To clear the data source, set the <code>source</code> property to null.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>source</code> property.
                        </p>
                        <ul>
                            <li>
                                Binding to Nested JSON. In order to use a nested JSON as a data source, you will have to do the following:
                                <br /><br />1. Add the sub-collection to the "dataFields" array and set its "type" to "array".
                                <br />2. Add a "hierarchy" object as a member of the "source" object.
                                <br />3. Add a member called "root" to the "hierarchy" object.
                                <br />4. Set the "root" to the sub-collection name.
<pre style="width:630px;  max-width: 630px; max-height: 400px; overflow:auto;"><code>
var employees = [
    {
        "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
        children: [
        { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
        { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
        { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
        { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
        {
            "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
            children: [
                    { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                    { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                    { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
            ]
        }
        ]
    }
];

// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        root: 'children'
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    sortable: true,
    columns: [
        { text: 'FirstName', dataField: 'FirstName', width: 150 },
        { text: 'LastName', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country' }
    ]
});
</code></pre>
                            </li>
                            <li>
                                Binding to JSON. Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
                                Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.

                                <br /><br />1. Add a "hierarchy" object as a member of the "source" object.
                                <br />2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
                                <br />3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
<pre style="width:630px; max-height: 400px; max-width: 630px; overflow:auto;"><code>
var employees = 
[
    {
        "EmployeeID": 1,
        "FirstName": "Nancy",
        "LastName": "Davolio",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-05-01 00:00:00",
        "BirthDate": "1948-12-08 00:00:00",
        "City": "Seattle",
        "Address": "507 - 20th Ave. E.Apt. 2A"
    },
    {
        "EmployeeID": 2,
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "ReportsTo": null,
        "Country": "USA",
        "Title": "Vice President, Sales",
        "HireDate": "1992-08-14 00:00:00",
        "BirthDate": "1952-02-19 00:00:00",
        "City": "Tacoma",
        "Address": "908 W. Capital Way"
    },
    {
        "EmployeeID": 3,
        "FirstName": "Janet",
        "LastName": "Leverling",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-04-01 00:00:00",
        "BirthDate": "1963-08-30 00:00:00",
        "City": "Kirkland",
        "Address": "722 Moss Bay Blvd."
    },
    {
        "EmployeeID": 4,
        "FirstName": "Margaret",
        "LastName": "Peacock",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1993-05-03 00:00:00",
        "BirthDate": "1937-09-19 00:00:00",
        "City": "Redmond",
        "Address": "4110 Old Redmond Rd."
    },
    {
        "EmployeeID": 5,
        "FirstName": "Steven",
        "LastName": "Buchanan",
        "ReportsTo": 2,
        "Country": "UK",
        "Title": "Sales Manager",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1955-03-04 00:00:00",
        "City": "London",
        "Address": "14 Garrett Hill"
    },
    {
        "EmployeeID": 6,
        "FirstName": "Michael",
        "LastName": "Suyama",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1963-07-02 00:00:00",
        "City": "London",
        "Address": "Coventry House Miner Rd."
    },
    {
        "EmployeeID": 7,
        "FirstName": "Robert",
        "LastName": "King",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-01-02 00:00:00",
        "BirthDate": "1960-05-29 00:00:00",
        "City": "London",
        "Address": "Edgeham Hollow Winchester Way"
    },
    {
        "EmployeeID": 8,
        "FirstName": "Laura",
        "LastName": "Callahan",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Inside Sales Coordinator",
        "HireDate": "1994-03-05 00:00:00",
        "BirthDate": "1958-01-09 00:00:00",
        "City": "Seattle",
        "Address": "4726 - 11th Ave. N.E."
    },
    {
        "EmployeeID": 9,
        "FirstName": "Anne",
        "LastName": "Dodsworth",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-11-15 00:00:00",
        "BirthDate": "1966-01-27 00:00:00",
        "City": "London",
        "Address": "7 Houndstooth Rd."
    }
];
// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    sortable: true,
    ready: function()
    {
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 150 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country' }
    ],
    columnGroups: [
        { text: 'Name', name: 'Name' }
    ]
});
</code></pre>
                            </li>
                           <li>
                                Binding to XML. The approach is similar to binding to JSON with the only difference that the source object's "dataType" should be set to "xml" and you muse set the
                                source object's "root", "record" and "id" members. Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
                                Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.

                                <br /><br />1. Add a "hierarchy" object as a member of the "source" object.
                                <br />2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
                                <br />3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
<br /><br />XML Data - employees.xml<br /><br />
<pre style='width: 630px; max-width: 630px;  max-height: 400px; overflow:auto; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;?xml version=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"1.0"</span>?&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employees&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"5"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Buchanan<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Steven<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Manager<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1955-03-04<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-10-17<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>14 Garrett Hill<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>SW1 8JR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3453<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"8"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Callahan<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Laura<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Inside Sales Coordinator<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1958-01-09<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-03-05<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>4726 - 11th Ave. N.E.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Seattle<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98105<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>2344<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"1"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Davolio<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Nancy<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1948-12-08<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-05-01<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>      507 - 20th Ave. E.<div/>      Apt. 2A<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Seattle<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98122<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>5467<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"9"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Dodsworth<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Anne<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1966-01-27<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-11-15<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>7 Houndstooth Rd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>WG2 7LT<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>452<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>5<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"2"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Fuller<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Andrew<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Vice President, Sales<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Dr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1952-02-19<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-08-14<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>908 W. Capital Way<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Tacoma<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98401<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3457<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>0<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"7"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>King<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Robert<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1960-05-29<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-01-02<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>      Edgeham Hollow<div/>      Winchester Way<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>RG1 9SP<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>465<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>5<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"3"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Leverling<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Janet<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1963-08-30<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-04-01<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>722 Moss Bay Blvd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Kirkland<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98033<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3355<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"4"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Peacock<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Margaret<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mrs.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1937-09-19<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-05-03<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>4110 Old Redmond Rd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Redmond<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98052<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>5176<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"6"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Suyama<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Michael<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1963-07-02<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-10-17<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>      Coventry House<div/>      Miner Rd.<div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>EC2 7JR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>428<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ReportsTo&gt;</span>5<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ReportsTo&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employees&gt;</span><div/><div/></pre>
<pre style="width:630px; max-width: 630px;  max-height: 400px; overflow:auto;"><code>
var source =
{
    dataType: "xml",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    root: 'Employees',
    record: 'Employee',
    url: "employees.xml"
};

var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    columnsResize: true,
    ready: function()
    {
        // expand row with 'EmployeeKey = 2'
        $("#treeGrid").jqxTreeGrid('expandRow', 2);
    },
    columns: [
        { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
        { text: 'LastName',  dataField: 'LastName', width: 150 },
        { text: 'Title', dataField: 'Title', width: 300 },
        { text: 'Address', dataField: 'Address', width: 200 },
        { text: 'City', dataField: 'City', width: 150 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
    ]
});
</code></pre>                    
                            </li>
                           <li>
                                Binding to Nested XML. In order to use a nested XML as a data source, you will have to do the following:
                                <br /><br />1. Set the "root", "record" and "id" members of the source object. For more information about these members, visit: <a href="http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm">jquery-data-adapter.htm</a>. 
                                <br />2. Add a "hierarchy" object as a member of the "source" object.
                                <br />3. Add "root" and "record" members to the "hierarchy" object to specify the nested sequence.
<br /><br />XML Data - employees.xml<br /><br />
<pre style='width: 630px; max-height: 400px; max-width: 630px; overflow: auto; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;?xml version=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"1.0"</span>?&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employees&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"2"</span>&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Fuller<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Andrew<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Vice President, Sales<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Dr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1952-02-19<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-08-14<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>908 W. Capital Way<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Tacoma<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98401<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3457<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employees&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"8"</span>&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Callahan<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Laura<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Inside Sales Coordinator<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1958-01-09<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-03-05<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>4726 - 11th Ave. N.E.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Seattle<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98105<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>2344<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"1"</span>&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Davolio<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Nancy<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1948-12-08<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-05-01<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>          507 - 20th Ave. E.<div/>          Apt. 2A<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Seattle<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98122<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>5467<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Education includes a BA in psychology from Colorado State University in 1970.  She also completed <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"The Art of the Cold Call."</span>  Nancy is a member of Toastmasters International.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"5"</span>&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Buchanan<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Steven<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Manager<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1955-03-04<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-10-17<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>14 Garrett Hill<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>SW1 8JR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3453<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Successful Telemarketing" and "International Sales Management."</span>  He is fluent in French.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employees&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"9"</span>&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Dodsworth<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Anne<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1966-01-27<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-11-15<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>7 Houndstooth Rd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>WG2 7LT<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>452<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"7"</span>&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>King<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Robert<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1960-05-29<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1994-01-02<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>              Edgeham Hollow<div/>              Winchester Way<div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>RG1 9SP<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>465<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Selling in Europe,"</span> he was transferred to the London office in March 1993.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"6"</span>&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Suyama<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Michael<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mr.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1963-07-02<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-10-17<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span><div/>              Coventry House<div/>              Miner Rd.<div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>London<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region/&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>EC2 7JR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>428<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>            <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Multi-Cultural Selling" and "Time Management for the Sales Professional."</span>  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>          <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employees&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"3"</span>&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Leverling<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Janet<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Ms.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1963-08-30<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1992-04-01<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>722 Moss Bay Blvd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Kirkland<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98033<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>3355<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Employee EmployeeID=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"4"</span>&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;LastName&gt;</span>Peacock<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/LastName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FirstName&gt;</span>Margaret<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/FirstName&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Title&gt;</span>Sales Representative<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Title&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;TitleOfCourtesy&gt;</span>Mrs.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/TitleOfCourtesy&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;BirthDate&gt;</span>1937-09-19<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/BirthDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;HireDate&gt;</span>1993-05-03<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/HireDate&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Address&gt;</span>4110 Old Redmond Rd.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Address&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;City&gt;</span>Redmond<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/City&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Region&gt;</span>WA<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Region&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;PostalCode&gt;</span>98052<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/PostalCode&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Extension&gt;</span>5176<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Extension&gt;</span><div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;Notes&gt;</span>Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Notes&gt;</span><div/>      <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/>    <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employees&gt;</span><div/>  <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employee&gt;</span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/Employees&gt;</span><div/><div/></pre>
<pre style="width:630px;  max-height: 400px; max-width: 630px; overflow:auto;"><code>
var source =
{
    dataType: "xml",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        // defines the root and record of each hiearchy level.
        root: 'Employees',
        record: 'Employee'
    },
    id: 'EmployeeID',
    root: 'Employees',
    record: 'Employee',
    url: "employees.xml"
};

var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 680,
    source: dataAdapter,
    columnsResize: true,
    ready: function () {
        // expand row with 'EmployeeKey = 2'
        $("#treeGrid").jqxTreeGrid('expandRow', 2);
    },
    columns: [
        { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
        { text: 'LastName', dataField: 'LastName', width: 150 },
        { text: 'Title', dataField: 'Title', width: 300 },
        { text: 'Address', dataField: 'Address', width: 200 },
        { text: 'City', dataField: 'City', width: 150 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
    ]
});
</code></pre></li>
<li>
Binding to CSV/TSV. The source object's "dataType" should be set to "csv" or "tab". Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.

<br /><br />1. Add a "hierarchy" object as a member of the "source" object.
<br />2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
<br />3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
<br /><br />Tab Data - locations.tsv<br /><br />
<pre style='width: 630px;  max-height: 400px; overflow: auto; max-width: 630px; margin: 0px;' class='code'>1	Aruba	37	103000<div/>2	Afghanistan	35	22720000<div/>3	Angola	36	12878000<div/>4	Anguilla	37	8000<div/>5	Albania	34	3401200<div/>6	Andorra	34	78000<div/>7	Netherlands Antilles	37	217000<div/>8	United Arab Emirates	35	2441000<div/>9	Argentina	38	37032000<div/>10	Armenia	35	3520000<div/>11	Antigua and Barbuda	37	68000<div/>12	Austria	34	8091800<div/>13	Azerbaijan	35	7734000<div/>14	Burundi	36	6695000<div/>15	Belgium	34	10239000<div/>16	Benin	36	6097000<div/>17	Spain	34	39441700<div/>18	Estonia	34	1439200<div/>19	Ethiopia	36	62565000<div/>20	Finland	34	5171300<div/>22	Falkland Islands	38	2000<div/>23	France	34	59225700<div/>24	Faroe Islands	34	43000<div/>26	Gabon	36	1226000<div/>27	United Kingdom	34	59623400<div/>28	Georgia	35	4968000<div/>29	Ghana	36	20212000<div/>30	Gibraltar	34	25000<div/>31	Guinea	36	7430000<div/>32	Guadeloupe	37	456000<div/>33	Gambia	36	1305000<div/>34	Europe	null	731000000.00<div/>35	Asia	null	3879000000.00	<div/>36	Africa	null	922011000.00<div/>37	North America	null	528720588.00<div/>21	Australia	null	23300000<div/>25	Antarctica	null	1323<div/>38	South America	null	382000000.00<div/>39	Lithuania	34	3698500<div/>40	Luxembourg	34	435700<div/>41	Latvia	34	2424200<div/>42	Monaco	34	34000<div/>43	Moldova	34	4380000<div/>44	Mexico	37	98881000<div/>45	Macao	35	473000<div/>46	Morocco	36	28351000<div/>47	Madagascar	36	15942000<div/>48	Maldives	35	286000<div/>49	United States	37	278357000<div/>50	South Korea	35	46844000<div/>51	India	35	1013662000<div/>52	Canada	37	31147000<div/>53	Brazil	38	170115000<div/>54	Russian Federation	34	146934000<div/>55	Zimbabwe	36	11669000<div/>56	Germany	34	82164700<div/>57	Djibouti	36	638000<div/>58	Dominica	37	71000<div/>59	Denmark	34	5330000<div/>60	Hong Kong	35	6782000<div/>61	Japan	35	126714000<div/></pre>
<pre style="width:630px;  max-height: 400px; max-width: 630px; overflow:auto;"><code>
// prepare the data
var source =
{
    dataType: "tab",
    dataFields: [
        { name: "Id", type: "number" },
        { name: "Name", type: "string" },
        { name: "ParentID", type: "number" },
        { name: "Population", type: "number" }
    ],
    hierarchy:
    {
        keyDataField: { name: 'Id' },
        parentDataField: { name: 'ParentID' }
    },
    id: 'Id',
    url: 'locations.tsv'
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 500,
    height: 400,
    source: dataAdapter,
    ready: function()
    {
        $("#treeGrid").jqxTreeGrid('expandRow', '34');
    },
    columns:
    [
        { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
        { text: 'Population', dataField: "Population", align: 'center', width: '50%'}
    ]
});
</code></pre>
</li>
<li>Virtual Mode(Load on Demand) - you can load data into jqxTreeGrid dynamically, by using callback functions. For each record only when required, jqxTreeGrid calls <code>virtualModeCreateRecords</code> function and this allows you to provide records on demand. During the initialization of each record, jqxTreeGrid calls <code>virtualModeRecordCreating</code> which allows you to update some record settings.
<pre style="width:630px; max-height: 400px; max-width: 630px; overflow:auto;"><code>
var generateTasks = function (rowsCount) {
    var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
    var data = new Array();
    var generatekey = function () {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };

    for (var i = 0; i < rowsCount; i++) {
        var row = {};
        var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];

        var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        var taskindex = Math.floor(Math.random() * tasks.length);
        row["task"] = tasks[taskindex];
        row["duration"] = 1+Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}

// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    pageable: true,
    altRows: true,
    virtualModeCreateRecords: function(expandedRecord, done)
    {
        // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.

        // prepare the data
        var source =
        {
            dataType: "array",
            dataFields: [
                { name: "id", type: "string" },
                { name: "name", type: "string" },
                { name: "duration", type: "number" },
                { name: "task", type: "number" }
            ],
            localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
            id: 'id'
        }
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                done(dataAdapter.records);
            }
        });
        dataAdapter.dataBind();
    },
    virtualModeRecordCreating: function(record)
    {
        if (record.level == 2) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    },
    columns: [
        { text: 'Task', dataField: "task", align: 'center', width: 250 },
        { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
        {
            text: 'Duration', dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
                var hour = value > 1 ? " hours" : " hour";
                return value + hour;
            }
        }
    ]
});
</code></pre>
</li>
                        </ul>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KB495/">source is set to dataAdapter</a></div>
                    </div>
                </td>
            </tr> 
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>sortable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Enables/Disables the sorting feature.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>sortable</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({sortable: true}); </code></pre>
                        <p>
                            Get the <code>sortable</code> property.
                        </p>
                        <pre><code>var sortable = $('#treeGrid').jqxTreeGrid('sortable'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/84E8f/">sortable is set to true</a></div>
                    </div>
                </td>
            </tr> 
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span58'>showAggregates</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines whether the jqxTreeGrid's Aggregates bar is visible.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>showAggregates</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({showAggregates: true}); </code></pre>
                        <p>
                            Apply aggregates.
                        </p>
<pre style='width: 630px; overflow: auto; max-height: 400px; max-width: 630px; margin: 0px;' class='code'>var data = [<div/>    {<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>        [<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    {<div/>                        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div/>                        children:<div/>                        [<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div/>                        ]<div/>                    },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> }<div/>                ]<div/>            },<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div/>                ]<div/>            },<div/>            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div/>        ]<div/>    }<div/>];<div/><div/>var source =<div/>    {<div/>        dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>        dataFields: [<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children", type: "array"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"location", type: "string"</span> }<div/>        ],<div/>        hierarchy:<div/>            {<div/>                root: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span><div/>            },<div/>        localData: data,<div/>        id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span><div/>    };<div/><div/>var dataAdapter = new $.jqx.dataAdapter(source, {<div/>    loadComplete: function () {<div/><div/>    }<div/>});<div/>// create jqxTreeGrid.<div/>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>{<div/>    source: dataAdapter,<div/>    altRows: true,<div/>    width: 680,<div/>    showSubAggregates: true,<div/>    columnsResize: true,<div/>    ready: function () {<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '1'</span>);<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '2'</span>);<div/>    },<div/>    columns: [<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Name", align: "center", dataField: "name"</span>, width: 270 },<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Location", dataField: "location", cellsAlign: "center", align: "center"</span>, width: 200 },<div/>        {<div/>            text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2"</span>,<div/>            aggregates: [{<div/>                <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Total'</span>:<div/>                function (aggregatedValue, currentValue, column, record) {<div/>                    return aggregatedValue + currentValue;<div/>                }<div/>            }],<div/>            aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) {<div/>                if (type == <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"aggregates"</span>) {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 4px; float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                else {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                var usd = dataAdapter.formatNumber(aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                renderString += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;table&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td rowspan=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'2'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;strong&gt;</span>Total: <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/strong&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + usd + " USD<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + euro + " EUR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/table&gt;</span>"</span>;<div/>                return renderString;<div/>            }<div/>        }<div/>    ]<div/>});<div/></pre>
                        <p>
                            Get the <code>showAggregates</code> property.
                        </p>
                        <pre><code>var showAggregates = $('#treeGrid').jqxTreeGrid('showAggregates'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WyU62/">showAggregates is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span105'>showSubAggregates</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines whether jqxTreeGrid would calculate summary values for all values within
                            a group of records and would display the result inside footer cell after each group.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>showSubAggregates</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({showSubAggregates: true}); </code></pre>
                        <p>
                            Apply aggregates.
                        </p>
<pre style='width: 630px; overflow: auto; max-height: 400px; max-width: 630px; margin: 0px;' class='code'>var data = [<div/>    {<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div/>        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>        [<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    {<div/>                        <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div/>                        children:<div/>                        [<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div/>                            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div/>                        ]<div/>                    },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> }<div/>                ]<div/>            },<div/>            {<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div/>                <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div/>                [<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div/>                    { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div/>                ]<div/>            },<div/>            { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div/>        ]<div/>    }<div/>];<div/><div/>var source =<div/>    {<div/>        dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/>        dataFields: [<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children", type: "array"</span> },<div/>            { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"location", type: "string"</span> }<div/>        ],<div/>        hierarchy:<div/>            {<div/>                root: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span><div/>            },<div/>        localData: data,<div/>        id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span><div/>    };<div/><div/>var dataAdapter = new $.jqx.dataAdapter(source, {<div/>    loadComplete: function () {<div/><div/>    }<div/>});<div/>// create jqxTreeGrid.<div/>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<div/>{<div/>    source: dataAdapter,<div/>    altRows: true,<div/>    width: 680,<div/>    showSubAggregates: true,<div/>    columnsResize: true,<div/>    ready: function () {<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '1'</span>);<div/>        $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandRow', '2'</span>);<div/>    },<div/>    columns: [<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Name", align: "center", dataField: "name"</span>, width: 270 },<div/>        { text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Location", dataField: "location", cellsAlign: "center", align: "center"</span>, width: 200 },<div/>        {<div/>            text: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2"</span>,<div/>            aggregates: [{<div/>                <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Total'</span>:<div/>                function (aggregatedValue, currentValue, column, record) {<div/>                    return aggregatedValue + currentValue;<div/>                }<div/>            }],<div/>            aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) {<div/>                if (type == <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"aggregates"</span>) {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 4px; float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                else {<div/>                    var renderString = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'float: right;  height: 100%;'</span>&gt;</span>"</span>;<div/>                }<div/>                var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                var usd = dataAdapter.formatNumber(aggregates.Total, <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"f2"</span>);;<div/>                renderString += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;table&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td rowspan=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'2'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;strong&gt;</span>Total: <span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/strong&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + usd + " USD<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>" + euro + " EUR<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/table&gt;</span>"</span>;<div/>                return renderString;<div/>            }<div/>        }<div/>    ]<div/>});<div/></pre>
                        <p>
                            Get the <code>showSubAggregates</code> property.
                        </p>
                        <pre><code>var showSubAggregates = $('#treeGrid').jqxTreeGrid('showSubAggregates'); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LJaRE/">showSubAggregates is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>showToolbar</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines whether the jqxTreeGrid's Toolbar is visible.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>showToolbar</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({showToolbar: true}); </code></pre>
                        <p>
                            Get the <code>showToolbar</code> property.
                        </p>
                        <pre><code>var showToolbar = $('#treeGrid').jqxTreeGrid('showToolbar'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jk59r/">showToolbar is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>showStatusbar</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Determines whether the jqxTreeGrid's Statusbar is visible.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>showStatusbar</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({showStatusbar: true}); </code></pre>
                        <p>
                            Get the <code>showStatusbar</code> property.
                        </p>
                        <pre><code>var showStatusbar = $('#treeGrid').jqxTreeGrid('showStatusbar'); </code></pre>
                                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kTvA3/">showStatusbar is set to true</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span54'>statusBarHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   34
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the height of the Statusbar. Statusbar is displayed after setting <code>showStatusbar</code> to true.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>statusBarHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({statusBarHeight: 40}); </code></pre>
                        <p>
                            Get the <code>statusBarHeight</code> property.
                        </p>
                        <pre><code>var statusBarHeight = $('#treeGrid').jqxTreeGrid('statusBarHeight'); </code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UeAxX/">statusBarHeight is set to 40</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span57'>scrollBarSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   17
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the size of the scrollbars.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollBarSize</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({scrollBarSize: 15}); </code></pre>
                        <p>
                            Get the <code>scrollBarSize</code> property.
                        </p>
                        <pre><code>var scrollBarSize = $('#treeGrid').jqxTreeGrid('scrollBarSize'); </code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d9egc/">scrollBarSize is set to 15</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>selectionMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   "multipleRows"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the selection mode. Possible values: <code>"multipleRows"</code>, <code>"singleRow"</code> and <code>"custom"</code>. In the "custom" mode, rows could be selected/unselected only through the API.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>selectionMode</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({selectionMode: "singleRow" }); </code></pre>
                        <p>
                            Get the <code>enableBrowserSelection</code> property.
                        </p>
                        <pre><code>var selectionMode = $('#treeGrid').jqxTreeGrid('selectionMode'); </code></pre>
                                      <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/85YCv/">selectionMode is set to 'singleRow'</a></div>
                    </div>
                </td>
            </tr>    
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span56'>showHeader</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's columns visibility.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>showHeader</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({showHeader: false});</code></pre>
                        <p>
                            Get the <code>showHeader</code> property.
                        </p>
                        <pre><code>var showHeader = $('#treeGrid').jqxTreeGrid('showHeader');</code></pre>
                                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tnSww/">showHeader is set to false</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.</p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>
                                Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tKpr2/">theme is set to 'energyblue'</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span60'>toolbarHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   34
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the height of the Toolbar. Toolbar is displayed after setting <code>showToolbar</code> to true.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>toolbarHeight</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({toolbarHeight: 40}); </code></pre>
                        <p>
                            Get the <code>toolbarHeight</code> property.
                        </p>
                        <pre><code>var toolbarHeight = $('#treeGrid').jqxTreeGrid('toolbarHeight'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zQnHr/">toolbarHeight is set to 40</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxTreeGrid's width.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#treeGrid').jqxTreeGrid({width:"200px"});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#treeGrid').jqxTreeGrid('width');</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MFcRZ/">width is set to 680</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span106'>virtualModeCreateRecords</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         By defining that function you can load data into jqxTreeGrid dynamically. For each record only when required, jqxTreeGrid calls <code>virtualModeCreateRecords</code> function and this allows you to provide records on demand. In order to enable the load on demand feature, you should also define the <code>virtualModeRecordCreating</code> function.
                        </p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID. If null is passed, that the function's result would be the records of the first hierarchy level.</li>
                            <li>Done - callback function. Call it when data is loaded and pass the loaded data as an Array.</li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>virtualModeCreateRecords</code> property.
                        </p>
<pre style="width:630px; max-height: 400px; max-width: 630px; overflow:auto;"><code>
var generateTasks = function (rowsCount) {
    var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
    var data = new Array();
    var generatekey = function () {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };

    for (var i = 0; i < rowsCount; i++) {
        var row = {};
        var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];

        var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        var taskindex = Math.floor(Math.random() * tasks.length);
        row["task"] = tasks[taskindex];
        row["duration"] = 1+Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}

// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    pageable: true,
    altRows: true,
    virtualModeCreateRecords: function(expandedRecord, done)
    {
        // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.

        // prepare the data
        var source =
        {
            dataType: "array",
            dataFields: [
                { name: "id", type: "string" },
                { name: "name", type: "string" },
                { name: "duration", type: "number" },
                { name: "task", type: "number" }
            ],
            localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
            id: 'id'
        }
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                done(dataAdapter.records);
            }
        });
        dataAdapter.dataBind();
    },
    virtualModeRecordCreating: function(record)
    {
        if (record.level == 2) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    },
    columns: [
        { text: 'Task', dataField: "task", align: 'center', width: 250 },
        { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
        {
            text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
                var hour = value > 1 ? " hours" : " hour";
                return value + hour;
            }
        }
    ]
});
</code></pre>      
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j82VQ/">virtualModeCreateRecords is set to a custom function</a></div>                                       
                    </div>
                </td>
            </tr> 
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span107'>virtualModeRecordCreating</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        By defining that function you can initialize the dynamic data that you load into jqxTreeGrid. In order to enable the load on demand feature, you should also define <code>virtualModeCreateRecords</code> function. 
                        </p>
                        List of parameters:
                        <ul>
                            <li>Row - Object with the following reserved members:
                                <ul>
                                    <li>checked - Boolean value. Determines the row's checked state.</li>
                                    <li>expanded - Boolean value. Determines the row's expanded state.</li>
                                    <li>icon - String value. Determines the row's icon url.</li>
                                    <li>leaf - Boolean value. Determines whether the row is a leaf in the hierarchy. When you set <code>leaf</code> to true, the expand/collapse button would not be displayed.</li>
                                    <li>level - Integer value. Returns the row's hierarchy level.</li>
                                    <li>selected - Boolean value. Determines the row's selected state.</li>
                               </ul>
                            </li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>virtualModeRecordCreating</code> property.
                        </p>
<pre style="width:630px; max-height: 400px; max-width: 630px; overflow:auto;"><code>
var generateTasks = function (rowsCount) {
    var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
    var data = new Array();
    var generatekey = function () {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };

    for (var i = 0; i < rowsCount; i++) {
        var row = {};
        var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];

        var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        var taskindex = Math.floor(Math.random() * tasks.length);
        row["task"] = tasks[taskindex];
        row["duration"] = 1+Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}

// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    pageable: true,
    altRows: true,
    virtualModeCreateRecords: function(expandedRecord, done)
    {
        // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.

        // prepare the data
        var source =
        {
            dataType: "array",
            dataFields: [
                { name: "id", type: "string" },
                { name: "name", type: "string" },
                { name: "duration", type: "number" },
                { name: "task", type: "number" }
            ],
            localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
            id: 'id'
        }
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                done(dataAdapter.records);
            }
        });
        dataAdapter.dataBind();
    },
    virtualModeRecordCreating: function(record)
    {
        if (record.level == 2) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    },
    columns: [
        { text: 'Task', dataField: "task", align: 'center', width: 250 },
        { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
        {
            text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
                var hour = value > 1 ? " hours" : " hour";
                return value + hour;
            }
        }
    ]
});
</code></pre>     
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rBUcu/">virtualModeRecordCreating is set to a custom function</a></div>                                         
                    </div>
                </td>
            </tr> 
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>bindingComplete</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This event is triggered when the jqxTreeGrid binding is completed.
                           *Bind to that event before the jqxTreeGrid's initialization. Otherwise, if you are populating the widget from a local data source and bind to <code>bindingComplete</code> after the initialization, the event could be already raised when you attach an event handler to it. 
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>bindingComplete</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>$('#treeGrid').on('bindingComplete', function (event) { // Some code here. }); </code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j2taE/">  Bind to the bindingComplete event by type: jqxTreeGrid.</a></div>      
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span70'>cellValueChanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This event is triggered when a cell value is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>cellValueChanged</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('cellValueChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // cell value.
    var value = args.value;
    // old cell value.
    var oldValue = args.oldValue;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rKEJL/">  Bind to the cellValueChanged event by type: jqxTreeGrid.</a></div>      
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>filter</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This event is triggered when the jqxTreeGrid's rows filter is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>filter</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('filter',
function (event)
{
    var args = event.args;
    // array of filters. Each filter in that array has 2 members - "datafield" and "filter". "datafield" is the filter column's bound field, 
    // "filter" is an object with key/value pairs which represents a filter group applied to a column. It has a "getfilters" method which returns an Array of the individual filters.
    // each individual filter has the following members: "condition", "value", "type" and "operator".
    // For more information about "condition" see the "localization" property. 
    // "type" could be "stringfilter", "numberfilter", "datefilter" or "booleanfilter".
    // "operator" could be "0" or "1" depending on the relation between the filter with the other filters within the filter group. 
    // "value" represents the filter's value.
    var filters = args.filters;
});
                         </code></pre>
                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cw9gL/">  Bind to the filter event by type: jqxTreeGrid.</a></div>  
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>pageChanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when the jqxTreeGrid's current page is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>pageChanged</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('pageChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // page num.
    var pageNum = args.pagenum;
    // old page num.
    var oldPageNum = args.oldpagenum;
    // page size.
    var pageSize args.pagesize;
});
                         </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/99AGx/">  Bind to the pageChanged event by type: jqxTreeGrid.</a></div>  
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span62'>pageSizeChanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when the jqxTreeGrid's page size is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>pageSizeChanged</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('pageSizeChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // page num.
    var pageNum = args.pagenum;
    // old page size.
    var oldPageSize = args.oldpagesize;
    // page size.
    var pageSize args.pagesize;
});
                         </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DMd5v/">  Bind to the pageSizeChanged event by type: jqxTreeGrid.</a></div>  
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span64'>rowClick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is clicked.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowClick</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowClick', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
    // original click event.
    var clickEvent = args.originalEvent;
});
                         </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fVuBp/">  Bind to the rowClick event by type: jqxTreeGrid.</a></div>  
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span65'>rowDoubleClick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is double-clicked.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowDoubleClick</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowDoubleClick', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
    // original double click event.
    var clickEvent = args.originalEvent;
});
                         </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gAhKc/">  Bind to the rowDoubleClick event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span66'>rowSelect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is selected.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowSelect</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowSelect', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Y5h6y/">  Bind to the rowSelect event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span67'>rowUnselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is unselected.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowUnselect</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowUnselect', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7c5wL/">  Bind to the rowUnselect event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>rowBeginEdit</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row edit begins.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowBeginEdit</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowBeginEdit', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                                   <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SYGTL/">  Bind to the rowBeginEdit event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span69'>rowEndEdit</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row edit ends.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowEndEdit</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowEndEdit', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9ded2/">  Bind to the rowEndEdit event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span103'>rowCheck</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is checked.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowCheck</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowCheck', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HCNBN/">  Bind to the rowCheck event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span104'>rowUncheck</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This is triggered when a row is unchecked.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>rowUncheck</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('rowUncheck', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row key.
    var key args.key;
});
                         </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dKTa4/">  Bind to the rowUncheck event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>sort</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           This event is triggered when the jqxTreeGrid sort order or sort column is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>sort</code> event by type: jqxTreeGrid.
                        </p>
                        <pre><code>
$('#treeGrid').on('sort', function (event) { 
    var args = event.args; 
    // column's data field.
    var sortcolumn = args.sortcolumn; 
    // sort order.  { 'ascending': true or false, 'descending': true or false }
    var sortdirection = args.sortdirection;
});
                        </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7cFXL/">  Bind to the sort event by type: jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>addRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Adds a new row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row. If null is passed, the jqxTreeGrid will generate an unique.</li>
                            <li>Row Data - Object with Key/Value pairs. To add an empty row, pass {}.</li>
                            <li>Row Position - string with two possible values - "last" and "first". By default "last" is used.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>addRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('addRow', null, {});</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rkttb/"> adds a new row in the jqxTreeGrid.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>addFilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Adds a new filter.</p>
                        List of parameters:
                        <ul>
                            <li>Data Field - column's data field.</li>
                            <li>filter - a filter group.
<br /><br />
Definitions:
<br /><br />
<ul>
<li>
  filterGroup - The filter group represents a group of one or more filters.
  <h4>Code Example</h4> 
  // creates a new filter group. 
   var filterGroup = new $.jqx.filter();
</li>
<li>
	filter - a filter added to the filter group. Each filter has value and condition. The filter condition specifies the way the filter will evaluate each value with the filter's value. The filter condition depends on the filter’s type. 
	To create a filter, use the <code>createfilter</code> method of the filterGroup. It has 3 parameters - filter type("stringfilter", "datefilter", "booleanfilter" and "numericfilter"), filter value and filter's condition.
	<h4>Code Example</h4>
	<pre><code>
var filtervalue = 'Beate';
var filtercondition = 'contains';
// possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
// possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'                         
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
</code></pre>
</li>
<li>
	filter operator - determines the relation between filters within a filter group. The operator could be 0(AND) or 1(OR).
	In the code example below, we added two filters to a filter group with operator ‘or’. By doing that, each value will be evaluated by <code>filter1</code> and <code>filter2</code> and the evaluation result will be true, if the <code>filter1</code> evaluation result is true or <code>filter2</code> evaluation result is true.
<pre><code>
var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
</code></pre>
</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>addFilter</code> method.
                        </p>
<pre><code>
var filtertype = 'stringfilter';
// create a new group of filters.
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = "Empty";
var filtercondition = 'equal';
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
// add the filters.
$("#treeGrid").jqxTreeGrid('addFilter', dataField, filtergroup);
// apply the filters.
$("#treeGrid").jqxTreeGrid('applyFilters');
</code></pre>        
                                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zNYD2/"> adds a new filter in the jqxTreeGrid.</a></div>       
                     </div>

                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>applyFilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Applies the added/removed filters.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>applyFilters</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('applyFilters');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5QDqq/"> apply a new filter in the jqxTreeGrid.</a></div>  
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>beginUpdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Begins an update and stops all refreshes.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>beginUpdate</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('beginUpdate');</code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dF9j2/"> begins the update of the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>beginRowEdit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Begins a row edit operation when <code>editable</code> is set to true.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>beginRowEdit</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('beginRowEdit', 'ALFKI');</code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rcbJm/"> begins the update of the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>clearSelection</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Clears the selection.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>clearSelection</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('clearSelection');</code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6wY27/"> clears the selection of the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>clearFilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Clears the filters.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>clearFilters</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('clearFilters');</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VL2hh/"> clears the filters of the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>clear</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Clears the jqxTreeGrid.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>clear</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('clear');</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jbt9C/"> clears the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span83'>checkRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Checks a row when <code>checkboxes</code> is set to true.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>checkRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('checkRow', 'ALFKI');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3rt8z/"> checks a row in the the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span101'>collapseRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Collapses a row.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>collapseRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('collapseRow', 'ALFKI');</code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A7CtW/"> collapses a row in the the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Destroys jqxTreeGrid and removes it from the DOM.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('destroy');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kKBRx/"> destroy  the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span59'>deleteRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Deletes a row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>deleteRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('deleteRow', 'ALFKI');</code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/23yBu/"> delete a row in the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span102'>expandRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Expands a row.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>expandRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('expandRow', 'ALFKI');</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/675mL/"> expand a row in the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span71'>endUpdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Ends the update and resumes all refreshes.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>endUpdate</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('endUpdate');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sM6LX/"> ends the update of the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span72'>ensureRowVisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Moves the vertical scrollbar to a row.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>ensureRowVisible</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('ensureRowVisible', 'ALFKI');</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6XZW5/"> ensures a row's vizibility in  the jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span73'>endRowEdit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Ends a row edit when <code>editable</code> is set to true. </p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                            <li>Boolean value - determines whether the changes would be canceled or confirmed.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>endRowEdit</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI');</code></pre>
                        <p>
                            Invoke the <code>endRowEdit</code> method and cancel changes.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI', true);</code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DQDy8/"> Invoke the endRowEdit method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span108'>exportData</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Exports TreeGrid Data to Excel, HTML, XML, JSON, CSV or TSV. See also the <code>exportSettings</code> property</p>
                        List of parameters:
                        <ul>
                            <li>Data Type - String which determines the export type. Possible values: 'xls', 'html', 'xml', 'json', 'csv', 'tsv'</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <pre style="max-width: 630px; overflow: auto; width: 630px; max-height: 400px; height: 400px;"><code>
var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }];

//// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    ready: function () {
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [
        { text: 'First Name', dataField: 'FirstName', width: 150 },
        { text: 'Last Name', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country', width: 120 }
    ]
});

$("#excelExport").jqxButton();
$("#xmlExport").jqxButton();
$("#csvExport").jqxButton();
$("#tsvExport").jqxButton();
$("#htmlExport").jqxButton();
$("#jsonExport").jqxButton();

$("#excelExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'xls');
});
$("#xmlExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'xml');
});
$("#csvExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'csv');
});
$("#tsvExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'tsv');
});
$("#htmlExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'html');
});
$("#jsonExport").click(function () {
    $("#treeGrid").jqxTreeGrid('exportData', 'json');
});
                        </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zk2qW/"> Invoke the exportData method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span74'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Focus jqxTreeGrid.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>focus</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('focus');</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MgayL/"> Invoke the focus method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span75'>getColumnProperty</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Gets a property value of a column.</p>
                        List of parameters:
                        <ul>
                            <li>data field - column's data field.</li>
                            <li>property name - determines the property's name.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getColumnProperty</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('getColumnProperty', 'firstName', 'width');</code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qcx3x/"> Invoke the getColumnProperty method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span76'>goToPage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Navigates to a page when <code>pageable</code> is set to true.</p>
                        List of parameters:
                        <ul>
                            <li>page index - a zero based index.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>goToPage</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('goToPage', 2);</code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3m8yB/"> Invoke the goToPage method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span77'>goToPrevPage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Navigates to a previous page when <code>pageable</code> is set to true.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>goToPrevPage</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('goToPrevPage');</code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L9Frb/"> Invoke the goToPrevPage method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span78'>goToNextPage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Navigates to a next page when <code>pageable</code> is set to true.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>goToNextPage</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('goToNextPage');</code></pre>
                                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Vjj85/"> Invoke the goToNextPage method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span79'>getSelection</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns an array of selected rows.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getSelection</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('getSelection');</code></pre>
                        <p>Invoke the <code>getSelection</code> and loop through the selected rows</p>
                        <pre><code>
var selection = $("#table").jqxTreeGrid('getSelection');
for (var i = 0; i < selection.length; i++) {
    // get a selected row.
	var rowData = selection[i];
}
                         </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D2S5r/"> Invoke the getSelection method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span55'>getKey</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns the Row's Key. If the row's key is not found, returns null.</p>
                         List of parameters:
                        <ul>
                            <li>row object.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getKey</code> method.
                        </p>
                        <pre><code>
var key = $("#table").jqxTreeGrid('getKey', row);
                         </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/S3q9c/"> Invoke the getKey method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span100'>getRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns an Object. If the row is not found, returns null.</p>
                         List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                        </ul>
                        List of reserved members of the returned object:
                        <ul>
                            <li>checked - Boolean value. Returns the row's checked state.</li>
                            <li>expanded - Boolean value. Returns the row's expanded state.</li>
                            <li>icon - String value. Returns the row's icon url.</li>
                            <li>leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.</li>
                            <li>level - Integer value. Returns the row's hierarchy level.</li>
                            <li>parent - Object. Returns null for root rows. Otherwise, returns the parent row's object</li>
                            <li>records - Array. Returns the row's sub-rows collection.</li> 
                            <li>selected - Boolean value. Returns the row's selected state.</li>
                            <li>uid - Number/String value. Returns the row's unique ID/Key.</li>
                       </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getRow</code> method.
                        </p>
                        <pre><code>
var row = $("#table").jqxTreeGrid('getRow', "1.2");
                         </code></pre>
                                   <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nhbJ5/"> Invoke the getRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span80'>getRows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns an array of all rows loaded into jqxTreeGrid.</p>
                        List of reserved Row members:
                        <ul>
                            <li>checked - Boolean value. Returns the row's checked state.</li>
                            <li>expanded - Boolean value. Returns the row's expanded state.</li>
                            <li>icon - String value. Returns the row's icon url.</li>
                            <li>leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.</li>
                            <li>level - Integer value. Returns the row's hierarchy level.</li>
                            <li>parent - Object. Returns null for root rows. Otherwise, returns the parent row's object</li>
                            <li>records - Array. Returns the row's sub-rows collection.</li> 
                            <li>selected - Boolean value. Returns the row's selected state.</li>
                            <li>uid - Number/String value. Returns the row's unique ID/Key.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getRows</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('getRows');</code></pre>
                        <p>Invoke the <code>getRows</code> and loop through the rows</p>
                        <pre><code>

      var firstLevelRows = $("#treeGrid").jqxTreeGrid('getRows');
      for (var i = 0; i < firstLevelRows.length; i++) {
          // get a row.
          var rowData = firstLevelRows[i];
      }

                         </code></pre>
                                     <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wjbL3/"> Invoke the getRows method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span110'>getView</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns an array of all rows loaded into jqxTreeGrid. The method takes into account the applied Filtering and Sorting.</p>
                        List of reserved Row members:
                        <ul>
                            <li>checked - Boolean value. Returns the row's checked state.</li>
                            <li>expanded - Boolean value. Returns the row's expanded state.</li>
                            <li>icon - String value. Returns the row's icon url.</li>
                            <li>leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.</li>
                            <li>level - Integer value. Returns the row's hierarchy level.</li>
                            <li>parent - Object. Returns null for root rows. Otherwise, returns the parent row's object</li>
                            <li>records - Array. Returns the row's sub-rows collection.</li> 
                            <li>selected - Boolean value. Returns the row's selected state.</li>
                            <li>uid - Number/String value. Returns the row's unique ID/Key.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getView</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('getView');</code></pre>
                        <p>Invoke the <code>getView</code> and loop through the rows</p>
                        <pre><code>
var firstLevelRows = $("#table").jqxTreeGrid('getView');
for (var i = 0; i < rows.length; i++) {
    // get a row.
    var rowData = rows[i];
}
                         </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ryxbE/"> Invoke the getView method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span81'>getCellValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Returns a value of a cell.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                            <li>Data field - column's data field.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>getCellValue</code> method.
                        </p>
                        <pre><code>var value = $("#treeGrid").jqxTreeGrid('getCellValue', 0, 'firstName');</code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LRWm4/"> Invoke the getCellValue method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span82'>hideColumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Hides a column.</p>
                        List of parameters:
                        <ul>
                            <li>data field - column's data field.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>hideColumn</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('hideColumn','firstName');</code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2RXVR/"> Invoke the hideColumn method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>    
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span84'>lockRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Locks a row i.e editing of the row would be disabled.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>lockRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('lockRow', 'ALFKI');</code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LLASY/"> Invoke the lockRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span85'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Performs a layout and updates the HTML elements position and size.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('refresh');</code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eCwAX/"> Invoke the refresh method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span86'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Renders jqxTreeGrid.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('render');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/59Unx/"> Invoke the render method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span87'>removeFilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Removes a filter.</p>
                        List of parameters:
                        <ul>
                            <li>data field - column's data field.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>removeFilter</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('removeFilter','firstName');</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rg3zc/"> Invoke the removeFilter method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span88'>scrollOffset</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Scrolls to a position.</p>
                        List of parameters:
                        <ul>
                            <li>top - the vertical scrollbar value.</li>
                            <li>left - the horizontal scrollbar value.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>scrollOffset</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('scrollOffset', 10, 10);</code></pre>
                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rg3zc/"> Invoke the removeFilter method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span89'>setColumnProperty</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets a property of a column. See the <code>columns</code> property for more information.</p>
                        List of parameters:
                        <ul>
                           <li>data field - column's data field.</li>
                           <li>property name - determines the property's name.</li>
                           <li>property value - determines the property's value.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>setColumnProperty</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('setColumnProperty', 'firstName', 'width', 200);</code></pre>
                                       <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/F7UMz/"> Invoke the setColumnProperty method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span90'>showColumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Shows a column.</p>
                        List of parameters:
                        <ul>
                           <li>data field - column's data field.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>showColumn</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('showColumn', 'firstName');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x7Cdm/"> Invoke the showColumn method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span91'>selectRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Selects a row.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>selectRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('selectRow', 'ALFKI');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/24RfH/"> Invoke the selectRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span93'>setCellValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets a value of a cell.</p>
                        List of parameters:
                        <ul>
                            <li>Row Key/ID - unique ID which identifies the row.</li>
                            <li>Data field - column's data field.</li>
                            <li>Cell value - the value to be set.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>setCellValue</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('setCellValue', 'ALFKI', 'firstName', 'New Value');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ycsY2/"> Invoke the setCellValue method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span94'>sortBy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sorts a column, if <code>sortable</code> is set to true.</p>
                        List of parameters:
                        <ul>
                            <li>data field - column's data field.</li>
                            <li>sort order - 'asc', 'desc' or null</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>sortBy</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('sortBy', 'firstName', 'asc');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TK4LJ/"> Invoke the sortBy method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span95'>updating</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Gets a boolean value which determines whether jqxTreeGrid is in update state i.e the <code>beginUpdate</code> method was called and the <code>endUpdate</code> method is not called yet.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>updating</code> method.
                        </p>
                        <pre><code>var isUpdating = $("#treeGrid").jqxTreeGrid('updating');</code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ykY69/"> Invoke the updating method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span96'>updateBoundData</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Performs a data bind and updates jqxTreeGrid with the new data.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>updateBoundData</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('updateBoundData');</code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7J2qP/"> Invoke the updateBoundData method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span97'>unselectRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Unselects a row.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>unselectRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('unselectRow', 'ALFKI');</code></pre>
                                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R7HpR/"> Invoke the unselectRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span92'>uncheckRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Unchecks a row when <code>checkboxes</code> is set to true.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>uncheckRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('uncheckRow', 'ALFKI');</code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CphBU/"> Invoke the uncheckRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span98'>updateRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Updates the row's data. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                           <li>Row Data - object with key/value pairs.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>updateRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('updateRow', 'ALFKI', {firstName: "New First Name", lastName: "New Last Name"});</code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hgwan/"> Invoke the updateRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span99'>unlockRow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Unlocks a row.</p>
                        List of parameters:
                        <ul>
                           <li>Row Key/ID - unique ID which identifies the row.</li>
                         </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>unlockRow</code> method.
                        </p>
                        <pre><code>$("#treeGrid").jqxTreeGrid('unlockRow', 'ALFKI');</code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rQ7jS/"> Invoke the unlockRow method of the  jqxTreeGrid.</a></div> 
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
